<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="0">
        <el-button :disabled="manyList.length===0" size="mini" type="primary" @click="many">添加参数</el-button>
        <ParamsTable :isShow="isShow" :tableData="manyList"></ParamsTable>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="1">
        <el-button :disabled="manyList.length===0" size="mini" type="primary" @click="only">添加属性</el-button>
        <ParamsTable :isShow="!isShow" :tableData="onlyList"></ParamsTable>
      </el-tab-pane>
    </el-tabs>
    <!--      添加属性-->
    <el-dialog :title="title" :visible.sync="postParamsVisible">
      <el-form ref="postParams" :model="formData" :rules="rules">
        <el-form-item :label="label" label-width="100px" prop="name">
          <el-input v-model.trim="formData.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="postParamsVisible = false">取 消</el-button>
        <el-button type="primary" @click="postParams">确 定</el-button>
      </div>
    </el-dialog>
    <!--      /编辑动态参数-->
  </div>
</template>

<script>
import ParamsTable from '@/views/commodity/components/ParamsTable'
import { createNamespacedHelpers } from 'vuex'
import { postParamsMany, postParamsOnly } from '@/api/commodity'

const { mapState } = createNamespacedHelpers('params')
export default {
  name: 'ParamsTabs',
  data () {
    return {
      activeName: '0',
      isShow: true,
      postParamsVisible: false,
      formData: {
        name: ''
      },
      title: '',
      label: '',
      rules: {
        name: [
          {
            required: true,
            message: '请输入参数名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    many () {
      this.title = '添加动态参数'
      this.label = '动态参数:'
      this.postParamsVisible = true
    },
    only () {
      this.title = '添加静态属性'
      this.label = '静态属性:'
      this.postParamsVisible = true
    },
    async postParams () {
      // console.log(this.activeName, this.id)
      await this.$refs.postParams.validate(async (valid) => {
        if (valid) {
          // console.log(1)
          try {
            if (this.activeName === '0') {
              await postParamsMany(this.id, this.formData.name)
              this.$emit('getCategoriesManyList', this.id)
            } else {
              await postParamsOnly(this.id, this.formData.name)
              this.$emit('getCategoriesOnlyList', this.id)
            }
            this.postParamsVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } catch (e) {
            this.$message.error('添加失败')
          }
        }
      })
    }
  },
  components: {
    ParamsTable
  },
  computed: {
    ...mapState(['manyList', 'onlyList', 'id'])
  }
}
</script>

<style scoped>

</style>
